<template>
	<div class="sys-org-container">

		<div style="width: 100%;">
			<screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData">
				<el-button type="primary" @click="validate">预览</el-button>
				<el-button type="primary" @click="print">打印</el-button>

			</screeningCondition>

		</div>

		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
			<el-table :data="state.Data" class="el-table" v-loading="state.loading" border highlight-current-row
				:header-cell-style="{ background: 'var(--el-color-primary)', height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px' }"
				:cell-style="{ padding: '2px' }" ref="tableRef" @select="selectToPrint"
				@selection-change="selectionChange">
				<!--  @selection-change="getNike" @row-click="rowClick" -->
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" label="序号" align="center"></el-table-column>
				<el-table-column prop="inAndOutBoundNum" label="出入库编号" align="center" show-overflow-tooltip />
				<el-table-column prop="inAndOutBoundStatus" label="出入库状态" align="center" show-overflow-tooltip
					width="90">
					<template v-slot="scope">
						<span v-if="scope.row.inAndOutBoundStatus === 0">未入库</span>
						<span v-else-if="scope.row.inAndOutBoundStatus === 1">已入库</span>
						<span v-else-if="scope.row.inAndOutBoundStatus === 2">未出库</span>
						<span v-else-if="scope.row.inAndOutBoundStatus === 3">已出库</span>
						<span v-else-if="scope.row.inAndOutBoundStatus === 4">入库中</span>
						<span v-else>出库中</span>
					</template>
				</el-table-column>
				<el-table-column prop="materielNum" label="物料号" align="center" show-overflow-tooltip>
					<template v-slot="scope">
						<div>
							{{ scope.row.materielNum }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="materielName" label="物料名称" align="center" header-align="center"
					show-overflow-tooltip />
				<el-table-column prop="inAndOutBoundType" label="出入库类型" align="center" header-align="center"
					show-overflow-tooltip width="90">
					<template #default="scope">
						<div v-if="scope.row.inAndOutBoundType === 0">
							入库
						</div>
						<div v-else>
							出库
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="inAndOutBoundCount" label="出入库数量" align="center" header-align="center"
					show-overflow-tooltip width="90" />

				<el-table-column prop="inAndOutBoundTime" label="出入库时间" width="150" align="center" header-align="center"
					show-overflow-tooltip />
				<el-table-column prop="InAndOutBoundUser" label="操作人" align="center" header-align="center"
					show-overflow-tooltip width="100" />
				<!-- <el-table-column prop="joinBoundOutTime" label="回库时间" align="center" header-align="center"
								show-overflow-tooltip /> -->
				<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
					<template #default="scope">
						<el-button size="small" type="primary" @click="openEditOrg(scope.row)" v-auth="'sysOrg:delete'">
							详情 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
				:page-sizes="[20, 30, 40, 50]" layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
		</el-card>


		<el-drawer v-model="addDrawer" title="新增入库" :append-to-body="true" size="30%">
			<el-form :model="state.ruleForm" label-width="auto" class="fl">
				<el-form-item label="入库编号" prop="joinBoundNum"
					:rules="[{ required: true, message: '入库编号不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.joinBoundNum" placeholder="入库编号" clearable class="input" />
				</el-form-item>
				<el-form-item label="物料号" prop="materielNum"
					:rules="[{ required: true, message: '物料号不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.materielNum" placeholder="物料号" clearable class="input" />
				</el-form-item>
				<el-form-item label="物料名称" prop="materielName"
					:rules="[{ required: true, message: '物料名称不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.materielName" placeholder="物料名称" clearable class="input" />
				</el-form-item>
				<el-form-item label="栈板编号" prop="palletNum"
					:rules="[{ required: true, message: '物料名称不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.palletNum" placeholder="物料名称" clearable class="input" />
				</el-form-item>
				<el-form-item label="料箱编号" prop="workBinNum"
					:rules="[{ required: true, message: '物料名称不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.workBinNum" placeholder="物料名称" clearable class="input" />

				</el-form-item>
				<el-form-item label="规格型号" prop="materielSpecs"
					:rules="[{ required: true, message: '规格型号不能为空', trigger: 'blur' }]">
					<el-select v-model="state.ruleForm.materielSpecs" filterable clearable class="w100">
						<el-option v-for="item in state.specifications" :key="item" :label="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="入库数量" prop="joinBoundCount"
					:rules="[{ required: true, message: '入库数量不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.joinBoundCount" placeholder="物料号" clearable class="input" />
				</el-form-item>

				<el-form-item label="入库类型" prop="joinBoundType"
					:rules="[{ required: true, message: '执行类型不能为空', trigger: 'blur' }]">
					<el-input v-model="state.ruleForm.joinBoundType" placeholder="执行类型" clearable class="input" />
				</el-form-item>
			</el-form>
			<div style="width: 100%;display: flex;justify-content: center;margin-top:60px">
				<el-button @click="submit" type="primary" round style="width:80px;height:30px">确认</el-button>
				<el-button @click="addDrawer = false" round style="width:80px;height:30px">取消</el-button>
			</div>
		</el-drawer>
		<EditOrg ref="editOrgRef" :title="state.editOrgTitle" />
		<PreviewPrint ref="previewRef" />

	</div>
</template>

<script lang="ts" setup name="sysOrg">
import { onMounted, reactive, ref } from 'vue';
import EditOrg from '/@/views/system/putInStorage/component/editOrg.vue';
import PreviewPrint from '/@/views/system/print/component/hiprint/preview.vue';

import { hiprint } from 'vue-plugin-hiprint';
import { WmsApi } from '/@/api/wh';
import screeningCondition from '/@/views/tools/screeningCondition.vue'
import { ElMessage } from 'element-plus';

let hiprintTemplate = ref();

const previewRef = ref()
// Broadcast Channel方案解决跨页面通信

const addDrawer = ref(false);
const editOrgRef = ref();
const tableRef = ref()
const emits = defineEmits(["sendValue"]);
const state = reactive({
	
	dataonLineListSelections: [],
	Data: [], // 机构列表数据
	queryParams: {
		inAndOutBoundType: '',
		materielNum: '',
		inAndOutBoundTimeRange: [],
		page: 1,
		pageSize: 20
	},
	editOrgTitle: '',
	// specifications: [],
	specifications: ["600*600", "800*800"],
	advanced: false,
	color: '#de2910',
	size: '14px',
	ruleForm: {},
	ruleForm2: {},
	belongWarehouses: [],
	belongAreas: [],
	belongStroage: [],
	total: 0,
	inquireInfo: [
		{
			label: "物料号",
			value: "",
			key: "materielNum",
			options: [],
			type: 'input'

		},
		{
			label: "物料名称",
			value: "",
			key: "materielName",
			options: [],
			type: 'input'

		},

		{
			label: "出入库时间",
			value: "",
			key: "inAndOutBoundTimeRange",
			options: [],
			type: 'date'
		},
		{
			label: "进出类型",
			value: "",
			key: "inAndOutBoundType",
			options: [
				{
					value: 1,
					label: "出库",
				},
				{
					value: 0,
					label: "入库",
				}
			],
			type: 'select'
		},
	],
	value: {},
	printData: {
		barCode: 'Admin.NET',
		qrCode: '二维码',
		longText: '长文本',
		materielName:'',
		// imageUrl: logoImg,
		table: [],
		inAndOutBoundNum:''
	},
	// editDrawer:false
});

onMounted(() => {
	getData(state.queryParams);

	WmsApi().getPrintTemplate('出库单据模板')
		.then(function (res) {
			console.log(res);
			hiprintTemplate.value = new hiprint.PrintTemplate({
			template:JSON.parse(res.data.result.template)
		})
		})
		.catch(function (error) {
			console.log(error);

		});
});
//验证完之后跳转到预览页面
const validate = () => {

	if (state.dataonLineListSelections.length == 0) {
		ElMessage.error('请选择要编辑的行')
	} else {
		console.log(state.dataonLineListSelections);
		state.printData.materielName=state.dataonLineListSelections[0].materielName
		state.printData.inAndOutBoundNum=state.dataonLineListSelections[0].inAndOutBoundNum
		previewRef.value?.showDialog(hiprintTemplate.value, state.printData, 250);

	}

}
const print=()=>{
	hiprintTemplate.value.print(
		state.printData,
		{},
		{
			callback: () => {
			
			},
		}
	);
}
const selectionChange = (val) => {
	state.dataonLineListSelections = val;

}

const selectToPrint = (selection, row) => {
	// console.log('selection',selection);
	// console.log('row', row);
	const selectData = state.dataonLineListSelections
	console.log(state.dataonLineListSelections);
	
	tableRef.value.clearSelection()
	if (selectData.length == 1) {
		selectData.forEach(item => {
			// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
			if (item == row) {
				tableRef.value.toggleRowSelection(row, false);
			}
			// 不然就让当前的一行勾选
			else {
				tableRef.value.toggleRowSelection(row, true);
			}
		})
	}
	else {
		tableRef.value.toggleRowSelection(row, true);
	}

	// 清除 所有勾选项
	// tableRef.value.clearSelection()
	// 当表格数据都没有被勾选的时候 就返回
	// 主要用于将当前勾选的表格状态清除

	if (selection.length == 0) return
	// console.log(tableRef.value);
	//设置单选行
	tableRef.value.setCurrentRow(row, true);
	WmsApi().PutAndOutdetail(row.inAndOutBoundNum)
		.then(function (res) {

			state.printData.table = res.data.result.productData.map((row: any) => ({
				NAME: state.printData.materielName,
				DJ:row.materielNum,
				SL: row.productCount,
				GG: row.productionLot
			}
			))


		})
		.catch(function (error) {
			console.log(error);

		});
}

const getData = (value) => {
	state.value = value;
	console.log(value);
	if (value.inAndOutBoundTimeRange) {
		var inAndOutBoundTimeRange = [value.inAndOutBoundTimeRange[0], value.inAndOutBoundTimeRange[1]]
	} else {
		var inAndOutBoundTimeRange = []
	}
	var params = {
		page: state.queryParams.page,
		pageSize: state.queryParams.pageSize,
		materielName: value.materielName,
		materielNum: value.materielNum,
		inAndOutBoundTimeRange: inAndOutBoundTimeRange,
		inAndOutBoundType: value.inAndOutBoundType
	}
	WmsApi().PutAndOutPagePost(params)
		.then(function (res) {
			state.Data = res.data.result.items;
			state.total = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
}
//需要拿到子组件的实例，才能访问到子组件暴露的内容
const openEditOrg = (row) => {
	state.editOrgTitle = '查看入库单详情';
	editOrgRef.value?.openDialog(row);
};

const handleSizeChange = (val) => {
	state.queryParams.pageSize = val;
	state.queryParams.materielNum = state.value.materielNum;
	state.queryParams.materielName = state.value.materielName;
	state.queryParams.productionDate = state.value.productionDate;
	state.queryParams.inAndOutBoundType = state.value.inAndOutBoundType

	getData(state.queryParams);
};
const handleCurrentChange = (newVal) => {
	state.queryParams.page = newVal;
	state.queryParams.materielNum = state.value.materielNum;
	state.queryParams.materielName = state.value.materielName;
	state.queryParams.productionDate = state.value.productionDate;
	state.queryParams.inAndOutBoundType = state.value.inAndOutBoundType

	getData(state.queryParams);
};

</script>
<style lang="scss" scoped>
.fl {
	width: 60%;
	margin: 20px 80px;
}

.container {
	margin-top: 15px;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: calc(100% - 82px);
}

.table {
	width: 100%;
	flex: 1;
	height: 100%;
}

.el-table {
	width: 100%;
}

.extra {
	width: 170px;
	height: 80px;

	:deep(.el-textarea__inner) {
		height: 80px;
	}
}
</style>